<template>
  <div id="app">
      <router-view v-slot="{ Component }">
          <component :is="Component" />
      </router-view>
  </div>
</template>

<script>
    import { useRouter } from 'vue-router' ;
    import { useStore } from 'vuex';
    export default {
        name: 'App',

        setup() {
            const router = useRouter(),
                  store = useStore(),
                  state = store.state;

            router.beforeEach(async (to, from) => {
                //本应该使用token来进行验证，此处为简单实现效果用name代替
                if (!state.userData.name && to.name !== 'login') {
                    return {
                        name: 'login'
                    }

                }
            })
        }
    }
</script>

<style>
#app {
  height: 100%;
}
</style>
